<template>
  <div class="container learnstyle-page">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{paperInfo.name}} ({{paperInfo.mark}}分)</span>
          <span v-if="!isCommitPaper" style="color: red; font-size: 24px; position: absolute;left: 30%; bottom: 80%">考试时间: {{timeValue}}</span>
          <div style="float: right" class="back" @click="goBack">{{goBackText}} >></div>
        </div>

        <question-info
          :showNumberTitle="false"
          commitButtonText="提交试卷"
          :showVideoPlay="false"
          :data="paperQuestionList"
          @afterCommit="afterCommit"
          :isPaperQuestion="true"
          :isCommit="isCommitPaper"
          :modeId="modeId"
          :questionAnswerList="userQuestionAnswerList">
        </question-info>
      </el-card>
    </div>
</template>

<script>
    let thisPage = null
    import questionInfo from '@/components/question-info'
    import {getQuestionTypeApi} from '@/api/common'
    export default {
        name: 'exam',
        components: {questionInfo},
        data () {
          return {
            needAnswerQuestionCount: 0,
            examTime: null,
            timeInterval: null,
           // userTime: 86,
           // userTimes: 86 * 60 * 1000,
           // timeTargert: null,

            endTime: null,
            radio: 1,
            modeId: 0,
            goBackText: '返回上一页',
            openAnswerFlag: false,
            isCommitPaper: false,
            paperCount: 0,
            testPaperName: '',
            testPaperId: '',
            currentQuestion: {},
            paperQuestionList: [],
            userQuestionAnswerList: [], // 存储用户答题答案及试题答案解析
            currentPage: 0,
            timeValue: '',
            pageSize: 1,
            totalCount: 0,
            paperInfo: {},
            questionTypeList: [],
            examType: 2,
            languagePointsId: null,
        //    isFormErrorQuestionPage: false, // 从否从错题页面进入
            questionId: null,
          }
        },

        beforeCreate () {
          thisPage = this
        },

        mounted () {
          let that = this
          that.paperInfo = that.$store.getters.getTestPaperInfo
          if (that.paperInfo.exam_time) {
            that.examTime = that.paperInfo.exam_time * 60 * 1000
           // let data = new Date();
            let now =  new Date().getTime();
          //  console.log('现在的时间' + now);
            this.endTime = now + that.examTime;
            console.log('结束的时间' + this.endTime);
            that.timeTargert = setInterval(function(){
              that.startTime(); // 开始倒计时
            },100)
          }
          that.getPaperQuestionList()
          getQuestionTypeApi(data => {
            that.questionTypeList = data
          })


        },

        methods: {


        startTime() {
            if (this.timeValue === '0:00:00' || this.timeValue === '00:00:00') {
              clearInterval(this.timeInterval)
            }
            let nowTime = new Date().getTime();
            let chaTime = this.endTime - nowTime;
            //倒计时的时间
            if (chaTime >= 0) {
              let d = Math.floor(chaTime / 1000 / 60 / 60 / 24);
              let h = Math.floor(chaTime / 1000 / 60 / 60 % 24);
              let m = Math.floor(chaTime / 1000 / 60 % 60);
              let s = Math.floor(chaTime / 1000 % 60);
              if (d > 0) {
                this.timeValue = d + '天' + h + '时' + m + '分' + s + '秒'
              } else {
                this.timeValue = h + ':' + m + ':' + s
              }
            }
          },

          selectQuestion (index) {

          },

          // 答题卡
          openAnswerSheet () {
            this.openAnswerFlag = true
          },


          // 获取试卷试题列表
          getPaperQuestionList () {
            let that = this
            that.axios.get(that.$httpApi.httpUrl('/student/paper/getQuestionByPaperId'), {
              params: {
                testPaperInfoId: that.paperInfo.id,
              }
            }).then(function (response) {
              that.paperQuestionList = response.data.data.dataList
              if (that.paperQuestionList) {
                that.totalCount = that.paperQuestionList.length
              }
              if (response.data.data.isCommit) {
                that.isCommitPaper = true
              }
              if (that.totalCount > 0) {
                that.currentQuestion = that.paperQuestionList[0]
                that.paperQuestionList.forEach(question => {
                //  let needAnswer = false // 是否需要作答
                  if (question.question_type === 3 || question.question_type === 4 || question.question_type === 6) {
                    that.needAnswerQuestionCount++
                //    needAnswer = true
                    if (question.question_type === 4 && !question.userInfoAnswer) {
                       question.userInfoAnswer = []
                    }
                  }
                  let enclosure = []
                  question.enclosure.forEach(function (item) {
                    if (item) {
                      enclosure.push(item)
                    }
                  })
                  that.userQuestionAnswerList.push({
                    questionInfoId: question.id,
                    questionAnswer: question.answer,
                    questionType: question.question_type,
                    answerEnclosure: enclosure,
                    mark: question.mark,
                    userInfoAnswer: question.userInfoAnswer
                  //  needAnswerFlag: needAnswer
                  })
                })
              }
            })
          },

          afterCommit (userQuestionAnswerList) {
            let that = this
            that.axios.post(that.$httpApi.httpUrl('/student/paper/commitPaperQuestion'), {
              userInfoAnswerList: userQuestionAnswerList,
              courseId: 0,
              name: that.paperInfo.name,
              testPaperId: that.paperInfo.id,
              type: that.paperInfo.type,
              subjectId: that.paperInfo.subject_id,
              examType: that.examType,
              questionInfoId: that.questionId ? parseInt(that.questionId) : null,
              languagePointsId: that.languagePointsId ? parseInt(that.languagePointsId) : null
            }).then(function (response) {
              if (response.data.code === 1) {
                that.isCommitPaper = true
                that.$message.success(response.data.message)
                that.getPaperQuestionList()
                 /* that.$confirm(response.data.message, '请选择操作', {
                    confirmButtonText: '返回错题本',
                    cancelButtonText: '查看试题解析',
                    showClose: false,
                    type: 'warning'
                  }).then(() => {
                    that.$message.info('3秒后将自动返回我的错题本')
                    setTimeout(() => {
                      that.$router.go(-1)
                    }, 3000)
                  }).catch(() => {
                    that.isCommitPaper = true
                    that.getPaperQuestionList()
                  })
                } else {
                 // that.isCommitPaper = true
                  that.$message.success(response.data.message)
                  that.getPaperQuestionList()
                }*/
              } else {
                that.$message.error(response.data.message)
              }
            })
          },

          getUserAnswer (val) {
            this.setUserAnswer(val)
          },

          setUserAnswer (val) {
            let questionAnswer = this.userQuestionAnswerList[this.currentPage]
            questionAnswer.userInfoAnswer = val
          },
        },

        filters: {
          getQuestionTypeName (questionType) {
            for (let i in thisPage.questionTypeList) {
              if (thisPage.questionTypeList[i].code === questionType) {
                return thisPage.questionTypeList[i].value
              }
            }
          }
        }
    }
</script>

<style scoped>

  .back{
    color:#ca0000;
    cursor: pointer;
  }

  .text {
    font-size: 14px;
  }
  .oper-btn {
    position: relative;
    left: 35%;
    margin-top: 50px;
  }
  .radio-item {
    line-height: 40px; margin-left: 20px
  }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card p {display: inline}
  .box-card {
    width: 100%;
  }
  .box-card >>> p {display: inline-block}
</style>
